<template>
  <div>
    <el-container>
      <!-- <el-header style="font-size: 20px;background-color:#e3e4e5" class="header_title">
        <div @click="goCity">商城首页</div>
        <div>
          <el-dropdown>
            <i class="el-icon-user-solid" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-button @click="drawer = true" type="text" style="color: #000"
                >个人资料</el-button
              >
            </el-dropdown-menu>
          </el-dropdown>

          <el-button type="text" style="color: #000">我的订单</el-button>
          <el-button type="text" style="color: #000">欢迎登录</el-button>
        </div>
      </el-header> -->

      <el-main>
        <div>
          <div class="cart">
            <el-alert
              title="商品已成功加入购物车"
              type="success"
              description="返回查看更多详情"
              show-icon
              :closable="false"
            >
            </el-alert>
            <el-table
              :data="tableData"
              border
              style="width: 100%; height: 300px"
            >
              <el-table-column align="center">
                <div class="demo-image">
                  <div class="block" v-for="fit in fits" :key="fit">
                    <span class="demonstration">{{ fit }}</span>
                    <el-image
                      style="width: 150px; height: 100px;"
                      :src="url"
                      :fit="fit"
                      
                    ></el-image>
                  </div>
                </div>
              </el-table-column>

              <el-table-column
                prop="name"
                label="商品名称"
                align="center"
                width="150"
              ></el-table-column>

              <el-table-column
                prop="price"
                label="单价"
                align="center"
                width="200"
              ></el-table-column>

              <el-table-column label="数量" align="center">
                <span>1</span>
              </el-table-column>

              <el-table-column label="操作" align="center">
                <template>
                  <el-button size="mini" type="danger" @click="cancle">查看商品详情</el-button>
                  <el-button size="mini" type="danger" @click="Cart()"
                    >购物车结算</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <div>
              <el-alert
                title="购买了该商品的用户还购买了："
                type="info"
                width="300"
                :closable="false"
              >
              </el-alert>
            </div>

            <!-- 商品群 -->
            <div class="commoditys" style="float: left">
              <el-card
                style="
                  width: 230px;
                  height: 322px;
                  margin-top: 10px;
                  margin-left: 66px;
                  float: left;
                  overflow: hidden;
                  margin-right: 8px;
                "
                v-for="shangpin in shangpinqun"
                :key="shangpin.id"
              >
                <router-link :to="'/datail/' + shangpin.id">
                  <div
                    class="commodityimg"
                    style="width: 190px; height: 200px; padding-left: 5px"
                  >
                    <img
                      :src="shangpin.shangpinimg"
                      style="width: 100%; height: 100%"
                    />
                  </div>
                  <div
                    class="commodityname"
                    style="
            margin-top:10px
              width: 190px;
              height: 48px;
              overflow: hidden;
              text-align: left;
              font-size: 14px;
              line-height: 16px;
            "
                  >
                    {{ shangpin.commodityname }}
                  </div>
                  <div
                    class="commodityprice"
                    style="width: 190px; height: 20px"
                  >
                    <strong>
                      <span style="font-size: 14px; color: red"> ￥ </span>
                      <span style="font-size: 20px; color: red">
                        {{ shangpin.commodityprice }}
                      </span>
                    </strong>
                  </div>
                </router-link>
              </el-card>
            </div>
          </div>
        </div>
      </el-main>

      <el-footer> </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "app",
  component: {},
  data () {
    return {
      editIsDialog: false, //编辑弹窗
      addIsDialog: false, //添加弹窗
      multipleSelection: [], //存放已选择的数据
      currentDate: new Date(),
      fits: [""],
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      formData: {
        name: "",
        price: "",
        number: "",
      },
      editData: {},
      formLabelWidth: "200",
      //表格中的数据
      tableData: [
        {
          name: "全友家居 沙发 皮布艺沙发现代简约北欧大户型小户型客厅家具皮布沙发组合套装102111",
          price: 30,
          number: 1,
        },
      ],
      // 商品群
      shangpinqun: [
        {
          id: 1,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        }, {
          id: 2,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        }, {
          id: 3,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        }, {
          id: 4,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        }, {
          id: 5,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        }, {
          id: 6,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        }, {
          id: 7,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        }, {
          id: 8,
          shangpinimg: require("../imgs/logoo.jpg"),
          commodityname: " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
          commodityprice: 29.9

        },
      ],
    };
  },
  methods: {
    Cart () {
      this.$router.push("/Cart");
    },
    // 回首页
    goCity(){
        this.$router.push("/")
    },
    cancle(){
      this.$router.go(-1);
    }
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
  font-weight: 300 !important;
}
a:hover {
  color: red !important;
}
.el-header {
  background-color: #8ca8cc;
  color: #333;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}
.header_title {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
}
.sub-title {
  line-height: 60px;
}
.block {
  padding-top: 45px;
  height:200px
}

.el-border {
  border-radius: 0px;
}

.cart {
  margin: 50px auto;
  width: 1300px;
}
.group_btn {
  margin-bottom: 30px;
}
.addDialog .el-input {
  width: 90%;
}
.total_warpper {
  text-align: right;
  margin-top: 30px;
}
h3 {
  margin-top: 10px;
}

.bottom {
  margin-top: 14px;
  line-height: 10px;
}

.button {
  padding: 10;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}
</style>